{extend name="../../base/view/common/base" /}

{block name="style"}
<style type="text/css">
    .panel-num table {
        width: 100%;
    }

    .panel-num td {
        text-align: center;
        padding: 16px 0;
        border-left: 1px solid #f1f1f1;
        position: relative;
    }

    .panel-num td:nth-child(1) {
        border-left: none
    }

    .panel-num .num-title {
        padding-bottom: 16px;
        color: #999;
    }

    .panel-num .blue {
        font-size: 20px;
        font-weight: 300;
    }

    .panel-num td .badge {
        position: absolute;
        top: 0;
        right: 0;
    }

    .panel-num td .badge span {
        padding: 2px 4px;
        font-size: 12px;
        border-radius: 0 0 0 4px;
    }

    .dashboard-total td {
        border-top: 1px solid #f1f1f1
    }

    .dashboard-logs .layui-timeline-item {
        padding-bottom: 1px;
    }

    .info-td {
        width: 90px;
        text-align: right;
        background-color: #fafafa;
        color: #999;
        padding: 5px 3px;
    }

    .info-td {
        width: 90px;
        text-align: right;
        background-color: #fafafa;
        color: #999;
        padding: 5px 3px;
    }

    .layui-card-body .layui-timeline-title {
        padding-bottom: 0;
        font-size: 14px;
        margin-bottom: 4px;
    }

    .layui-card-body .layui-timeline-item {
        padding-bottom: 5px;
    }

    .layui-short-menu li {
        text-align: center;
    }

    .layui-short-menu li .iconfont {
        display: inline-block;
        font-weight: 600;
        width: 100%;
        height: 58px;
        line-height: 58px;
        margin-bottom: 5px;
        text-align: center;
        border-radius: 3px;
        font-size: 28px;
        background-color: #F8F8F8;
        color: #969696;
        transition: all .3s;
        -webkit-transition: all .3s;
    }

    .layui-short-menu li cite {
        color: #646464;
    }

    .layui-short-menu li:hover .iconfont {
        color: #1A75FF;
        background-color: #F2F8FF;
    }

    .layui-short-menu li:hover cite {
        color: #1A75FF;
    }

    .layui-matter-item li a {
        display: block;
        padding: 12px;
        background-color: #f8f8f8;
        color: #999;
        border-radius: 3px;
        transition: all .3s;
        -webkit-transition: all .3s;
    }

    .layui-matter-item li a:hover {
        background-color: #F2F8FF;
    }

    .layui-matter-item li cite {
        font-size: 24px;
        font-weight: 300;
        color: #1A75FF;
    }

    .layui-right-bar a {
        display: inline-block;
        width: 100%;
        height: 64px;
        text-align: center;
        border-radius: 3px;
        background-color: #F8F8F8;
        color: #969696;
        transition: all .3s;
        -webkit-transition: all .3s;
    }

    .layui-right-bar a .iconfont {
        display: inline-block;
        font-weight: 600;
        width: 100%;
        height: 37px;
        line-height: 39px;
        text-align: center;
        font-size: 24px;
    }

    .layui-right-bar a:hover {
        color: #1A75FF;
        background-color: #F2F8FF;
    }
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-page">
    <div class="layui-row layui-col-space16">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header"><h3>贡献率<span
                        style="color:#999; font-size:14px; font-weight:400; margin-left:5px">贡献率</span></h3>
                </div>
                <div class="layui-card-body">
                    <div id="logChart" style="width: 100%; height:400px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-row layui-col-space16">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div id="chartView" style="width: 100%;height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header"><h3>近半月新增员工数量<span
                        style="color:#999; font-size:14px; font-weight:400; margin-left:5px">近半月新增员工数量</span></h3>
                </div>
                <div class="layui-card-body">
                    <div id="ygChart" style="width: 100%; height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space16">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header"><h3>今日收付款占比<span
                        style="color:#999; font-size:14px; font-weight:400; margin-left:5px">今日收付款占比</span></h3>
                </div>
                <div class="layui-card-body">
                    <div id="incomePaymentChart" style="width: 100%; height:400px;"></div>
                </div>
            </div>
        </div>
        <!--<div class="layui-col-md4">-->
            <!--<div class="layui-card">-->
                <!--<div class="layui-card-header"><h3>今日签约统计<span-->
                        <!--style="color:#999; font-size:14px; font-weight:400; margin-left:5px">今日签约统计</span></h3>-->
                <!--</div>-->
                <!--<div class="layui-card-body">-->
                    <!--<div id="qyChart" style="width: 100%; height:400px;"></div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script src="{__GOUGU__}/third_party/echart/echarts.min.js"></script>
<script>
    function getRange() {
        let today = new Date();
        let tYear = today.getFullYear();
        let tMonth = today.getMonth() + 1;
        let tDate = today.getDate();
        let dateFirst = tYear + "-" + tMonth + "-" + tDate;
        let datelast = (tYear - 1) + "-" + tMonth + "-" + tDate;
        let dataRange = [];
        dataRange.push(dateFirst);
        dataRange.push(datelast);
        return dataRange;
    }

    function getDay(archiveCalendar) {
        var today = new Date();
        var dayArray = [];
        for (var i = 0; i < 366; i++) {
            var targetday_milliseconds = today.getTime() - 1000 * 60 * 60 * 24 * i;
            var date = new Date(targetday_milliseconds);
            dayArray.push(retunDay(date, archiveCalendar));
        }
        return dayArray;
    }

    function retunDay(day, archiveCalendar) {
        var tYear = day.getFullYear();
        var tMonth = day.getMonth();
        var tDate = day.getDate();
        tMonth = tMonth + 1;
        if (tMonth.toString().length == 1) {
            tMonth = "0" + tMonth;
        }
        if (tDate.toString().length == 1) {
            tDate = "0" + tDate;
        }
        var dateStr = tYear + "-" + tMonth + "-" + tDate;
        var dateArray = [];
        dateArray.push(dateStr);
        if (archiveCalendar[dateStr]) {
            dateArray.push(archiveCalendar[dateStr]);
        }
        else {
            dateArray.push(0);
        }
        return dateArray;
    }

    function setHour(num) {
        var str = num + ':00';
        if (num < 10) {
            str = '0' + num + ':00';
        }
        return str;
    }

    const moduleInit = ['tool', 'oaSchedule'];

    function gouguInit() {
        var tool = layui.tool, table = layui.table, work = layui.oaSchedule;

        if (typeof layoutNote === 'function') {
            layoutNote(table);
        }

        if (typeof layoutArticle === 'function') {
            layoutArticle(table);
        }

        if (typeof layoutArticle === 'function') {
            layoutArticle(table);
        }

        if (typeof layoutProject === 'function') {
            layoutProject(table);
        }

        if (typeof layoutTask === 'function') {
            layoutTask(table);
        }

        if (typeof layoutChartView === 'function') {
            layoutChartView();
        }

        if (typeof layoutChartYear === 'function') {
            layoutChartYear();
        }

        if (typeof layoutFastentry === 'function') {
            layoutFastentry(tool, work, table)
        }

        if (typeof layoutSystem === 'function') {
            layoutSystem()
        }

        if (typeof layoutRaking === 'function') {
            layoutRaking()
        }

        if (typeof layoutAction === 'function') {
            layoutAction()
        }


        logChart = echarts.init(document.getElementById('logChart'));
        $.ajax({
            url: "/finance/report/chart",
            type: 'get',
            data: {},
            success: function (e) {
                if (e.code == 0) {
                    var data_logs = e.data.data_logs;
                    var logItem = [];
                    $.each(data_logs, function (key, value) {
                        let item = {
                            value: value.gxl,
                            name: value.name
                        };
                        logItem.push(item);
                    });
                    let optC = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} :{d}%'
                        },
                        legend: {
                            top: '1%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '贡献率',
                                type: 'pie',
                                radius: '50%',
                                center: ['50%', '70%'],
                                data: logItem,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    logChart.setOption(optC);
                }
            }
        });

        chartView = echarts.init(document.getElementById('chartView'));
        $.ajax({
            url: "/home/api/get_view_data",
            type: 'get',
            data: {},
            success: function (e) {
                if (e.code == 0) {
                    var data_first = e.data.data_first;
                    var data_second = e.data.data_second;
                    var myDate = new Date();
                    var nowHour = myDate.getHours(); //获取当前小时数(0-23)
                    var xData = [];
                    var yData1 = [];
                    var yData2 = [];
                    $.each(data_first, function (key, value) {
                        if (key <= nowHour) {
                            yData1.push(value);
                        }
                    });
                    $.each(data_second, function (key, value) {
                        xData.push(setHour(key));
                        yData2.push(value);
                    });
                    var ops = {
                        title: {
                            top: '12px',
                            text: '今日与昨日员工活跃度',
                            left: '6px',
                            textStyle: {
                                fontSize: '18',
                                color: '#333',
                            }
                        },
                        color: ["#1AAD19", "#1890FF"],
                        grid: {
                            left: '16px',
                            right: '30px',
                            bottom: '12px',
                            top: '60px',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        toolbox: {
                            show: true,
                        },
                        legend: {
                            data: ["今日", "昨日"],
                            top: '16px',
                        },
                        xAxis: [{
                            type: "category",
                            boundaryGap: !1,
                            data: xData,
                            axisLine: {
                                lineStyle: {
                                    color: '#999999',
                                    width: 1,
                                }
                            },
                        }],
                        yAxis: [{
                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#999999',
                                    width: 1,
                                }
                            },
                        }],
                        series: [{
                            name: "今日",
                            type: "line",
                            smooth: !0,
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        type: "default",
                                        opacity: 0.2
                                    }
                                }
                            },
                            data: yData1
                        }, {
                            name: "昨日",
                            type: "line",
                            smooth: !0,
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        type: "default",
                                        opacity: 0.2
                                    }
                                }
                            },
                            data: yData2
                        }]
                    }
                    chartView.setOption(ops);
                }
            }
        });

        ygChart = echarts.init(document.getElementById('ygChart'));
        $.ajax({
            url: "/finance/report/chart",
            type: 'get',
            data: {},
            success: function (e) {
                if (e.code == 0) {
                    var data_logs = e.data.yg;
                    var logItem = [];
                    $.each(data_logs, function (key, value) {
                        let item = {
                            value: value.count,
                            name: value.date
                        };
                        logItem.push(item);
                    });
                    let optC = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} :{d}%'
                        },
                        legend: {
                            top: '1%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '贡献率',
                                type: 'pie',
                                radius: '50%',
                                center: ['50%', '70%'],
                                data: logItem,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    ygChart.setOption(optC);
                }
            }
        });
        incomePaymentChart = echarts.init(document.getElementById('incomePaymentChart'));
        $.ajax({
            url: "/finance/report/chart",
            type: 'get',
            data: {},
            success: function (e) {
                if (e.code == 0) {
                    var data_logs = e.data.sfk;
                    var logItem = [];
                    $.each(data_logs, function (key, value) {
                        let item = {
                            value: value.money,
                            name: value.name
                        };
                        logItem.push(item);
                    });
                    let optC = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} :{d}%'
                        },
                        legend: {
                            top: '1%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '收付款',
                                type: 'pie',
                                radius: '50%',
                                center: ['50%', '70%'],
                                data: logItem,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    incomePaymentChart.setOption(optC);
                }
            }
        });
    }

    setTimeout(function () {
        window.onresize = function () {
            if (logChart) {
                chartView.resize();
            }
            if (myChart) {
                myChart.resize();
            }
            if (logChart) {
                logChart.resize();
            }
        }
    })


</script>

{/block}
<!-- /脚本 -->